<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<script setup lang="ts">
 import {ref} from 'vue'
// ts 的函数形参 必须加类型 约束
// 形参:string 
// 返回值加类型 函数名():类型
// :void 表示函数没有返回值
function say(myname:string,hobby:Array<string>):void{
    console.log(myname)
    console.log(hobby)
}
say("王五",["唱歌","跳舞","rap"]);
// :never 表示函数没有返回值 函数体不能执行完
// function run():never{
// }


// 函数的形参 可忽略类型
// time?:number   可选参数 ? 表示 可传可不传 
// 可选参数 设计函数的参数的最后
// 函数的默认参数 game:string="王者荣耀"
function play(game:string="王者荣耀",time?:number):string {
    console.log(game)
    console.log(time)
   return game
}
play("蛋仔排队",10)

// 接口 interface  是用来约束对象的类型

// 接口可忽略的属性和方法 ？
interface Iperson{
  name:string,
  age:number,
  shengao?:number,// ？可忽略的属性
  hobby:Array<string>,
  eat(food:string):string,
  sleep(time:number):void,
  run?(dis:number):void //可忽略的方法
}
// 接口约束对象 
let xiaoyuxia:Iperson={
  name:"小玉霞",
  age:18,
  hobby:["吃","睡","玩","玩命的学习"],
  eat(food:string){
    console.log("正在吃"+food)
      return food
  },
  sleep(time:number){
    console.log(this.name+"正在睡觉"+time+"小时")
  }
}

let xiaohong:Iperson={
   name:"小红",
   age:19,
   hobby:["吃","睡","玩","玩命的学习"],
  eat(food:string){
    console.log("正在吃"+food)
      return food
  },
  sleep(time:number){
    console.log(this.name+"正在睡觉"+time+"小时")
  }
}

// 接口的继承
// 学生接口
interface Istudent extends Iperson{
    grade:string,
    class:string,
   study(time:number):void,
}
// 
let zhoushuren:Istudent={
  name:"周树人",
  age:19,
  hobby:["吃","睡","玩","玩命的学习"],
   eat(food:string){
    console.log("正在吃"+food)
      return food
  },
  sleep(time:number){
    console.log(this.name+"正在睡觉"+time+"小时")
  },
  grade:"三年级",
  class:"二班",
  study(time:number){
    console.log("正在学习"+time+"小时")
  }
}

// ref 的ts写法  ref<类型>
// 泛型写法
let mobile=ref(18543322222)
let phone=ref<number>(18477773333)
console.log(phone.value)


</script>